<template>
  <!-- <nuxt-link to="/user/edit">编辑用户</nuxt-link> -->
  <layout-list>
    <template #search>
      <UInput
        :highlight="false"
        icon="i-mingcute:user-1-line"
        size="lg"
        color="secondary"
        placeholder="输入人员名称"
      />
    </template>
    <template #operation>
      <nuxt-link to="/user/edit">
        <UButton icon="i-mingcute:add-line"> 新增人员 </UButton>
      </nuxt-link>
    </template>
    <UTable :data="data" :columns="columns" class="flex-1" />
  </layout-list>
</template>

<script setup lang="ts">
import type { TableColumn } from '@nuxt/ui'
import { resolveComponent } from 'vue'
import { type UserItem } from '~~/shared/types/user'
import { formatTime } from '~/utils/day'
import { ModalConfirm } from '#components'

useHead({
  title: '用户管理'
})

const UBadge = resolveComponent('UBadge')
const UDropdownMenu = resolveComponent('UDropdownMenu')
const UButton = resolveComponent('UButton')
const toast = useToast()
const overlay = useOverlay()
const { push } = useRouter()

async function handleDelete(userId: number) {
  const modalConfirm = overlay.create(ModalConfirm)
  modalConfirm.open({
    description: '确认删除该标签吗？',
    title: '提示',
    onConfirm: async () => {
      try {
        await $fetch(`/api/user/${userId}`, {
          method: 'DELETE'
        })
        toast.add({ title: '删除成功' })
      } catch (error) {
        throw error
      }
    }
  })
}

const columns: TableColumn<UserItem>[] = [
  {
    accessorKey: 'name',
    header: '人员名称'
  },
  {
    accessorKey: 'phone',
    header: '电话号码'
  },
  {
    accessorKey: 'role',
    header: '角色'
  },
  {
    accessorKey: 'status',
    header: '状态',
    cell: ({ row }) => {
      const { status } = row.original
      const map = new Map<number, string>()
      map.set(StatusEnum.可用, 'success')
      map.set(StatusEnum.不可用, 'error')
      const color = map.get(status)
      return h(UBadge, {
        variant: 'subtle',
        color,
        label: enumToOptions(StatusEnum).find((i) => i.value === status)?.label || '未知状态'
      })
    }
  },
  {
    accessorKey: 'loginedTime',
    header: '最后登录时间',
    cell: ({ row }) => {
      const { lastLoginAt } = row.original
      return formatTime(lastLoginAt)
    }
  },
  {
    id: 'actions',
    cell: ({ row }) => {
      const { id } = row.original
      return h(
        'div',
        h(
          UDropdownMenu,
          {
            content: {
              align: 'end'
            },
            items: [
              {
                label: '编辑',
                onSelect: () => {
                  push(`/user/edit/${id}`)
                }
              },
              {
                label: '删除',
                /**
                 * 处理删除操作的回调函数
                 * 当用户选择删除选项时触发
                 */
                onSelect: () => {
                  handleDelete(id)
                }
              }
            ]
          },
          () =>
            h(UButton, {
              icon: 'i-mingcute:more-2-line',
              color: 'neutral',
              variant: 'ghost'
            })
        )
      )
    }
  }
]

const data = ref<UserItem[]>([])
</script>
